<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title addtitletodoc="false">WebGL2 - Same Code - Resize</title>
<link type="text/css" href="resources/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<style>
html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    height: 100%;
    margin: 0;
    font-family: Helvetica, Arial, Sans-Serif;
}
#editor td {
    padding: 0px;
}
#editor {
    border-spacing: 0px;
    width: 100%;
    height: 100%;
}
#canvas {
    width: 100%;
    height: 100%;
    display: block;
}
#viewContainer {
    width: 70%
}
#controlContainer {
    width: 30%;
}
#controls {
    border-left: 5px solid black;
    background-color:#666;
    color: white;
    padding: 0px 0.5em 0px 0.5em;
    width: 100%;
    height: 100%;
    font-size: large;
}
</style>
</head>
<body>
<table id="editor">
  <tr>
    <td id="viewContainer">
       <canvas id="canvas"></canvas>
    </td>
    <td id="controlContainer">
      <div id="controls">Controls<br/>for<br/>an<br/>Editor<br/>would<br/>go<br/>here<br/><br/>&lt;=- Drag this black bar</div>
    </td>
  </tr>
</table>
</body>
<script src="resources/jquery-1.7.1.min.js"></script>
<script src="resources/jquery-ui-1.8.16.custom.min.js"></script>
<script src="resources/colResizable-1.3.min.js"></script>
<!--
This sample uses TWGL (Tiny WebGL) to hide the clutter.
Otherwise the sample would be full of code not related to the point of the sample.
For more info see https://webgl2fundamentals.org/webgl/lessons/webgl-less-code-more-fun.html
-->
<script src="resources/twgl-full.min.js"></script>
<script src="resources/m4.js"></script>
<script src="resources/same-code.js"></script>
<script>
"use strict";

$(function() {
  $("#editor").colResizable({
    liveDrag: true,
    gripInnerHtml: "<div class='grip'></div>",
    draggingClass: "dragging",
  });
});
</script>
</html>


